<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加电影</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div id="f1">
    <div class="container">
        <div class="row" style="margin: 20px 0">
            <center>
                <h1 style="color: red">{{mv.name}}</h1>
            </center>

        </div>
        <hr>
        <div class="row">
            <div class="col-md-5 col-md-offset-1" style="border:1px solid #e5e5e5">
                <div class="col-md-4" style="margin-top: 20px"><img :src="mv.url" width="160" alt=""></div>
                <div class="col-md-6 col-md-offset-2">
                    <p style="color: red;margin: 15px 0;font-size: 18px">序号：{{mv.id}}</p>
                    <p style="color: #1e88e5;margin: 15px 0;font-size: 18px">名称：{{mv.name}}</p>
                    <p style="color: green;margin: 15px 0;font-size: 18px">类型：{{mv.category}}</p>
                    <p style="color:purple;margin: 15px 0;font-size: 18px">区域：{{mv.region}}</p>
                    <p style="color: blue;margin: 15px 0;font-size: 18px">状态：{{mv.status}}</p>
                    <p style=";margin: 15px 0;font-size: 18px">时长：{{mv.duration}}分钟</p>
                </div>
            </div>
            <div class="col-md-6 ">
                <div class="col-md-12">
                    <table class="table table-bordered">
                        <caption>演职员表</caption>
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(a,i) in actors">
                            <td>{{i+1}}</td>
                            <td>{{a.name}}</td>
                            <td><a href="#" @click="del(a.actorId)">删除</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-12">
                    <form action="">
                        <div class="input-group">
                            <input type="text" v-model="aName" class="form-control" placeholder="输入要添加演员的姓名"
                                   name="actorName">
                            <span class="input-group-btn">
                                <button @click="addCast" class="btn btn-default" type="button">添加</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert("保存成功", {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层
                layer.close(index);

                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

            });
            // location.href = "/bs/movie_list.html"
            return false;
        });

    });
</script>
<script>
    let vm = new Vue({
        el: "#f1",
        data: {
            mv: "",
            actors: [],
            aId: "",
            aName: ""
        },
        created: function () {
            let id = location.search.split("=")[1];
            axios.get("/movie/backstageSelectOne?id=" + id).then(function (response) {
                vm.mv = response.data;

            })
            axios.get("/movie/actorsByMovieId?id=" + id).then(function (response) {
                vm.actors = response.data
            })
        },
        methods: {
            del: function (actorId) {
                axios.get("/movie/deleteCast?actorId="
                    + actorId + "&movieId=" + vm.mv.id).then(function (response) {
                    if (response.data == 1) {
                        location.reload()
                    }
                })
            },
            addCast: function () {
                axios.get("/movie/getActorNameById?name=" + vm.aName).then(function (response) {
                    if (response.data == "") {
                        alert("查无此人，请重新输入")
                        return
                    }
                    vm.aId = response.data;
                    axios.get("/movie/addCast?actorId=" + vm.aId
                        + "&movieId=" + vm.mv.id).then(function (response) {
                        if (response.data == 1) {
                            location.reload();
                        }
                    })
                })
            }
        }
    })
</script>
</body>
</html>